<!-- 分类管理 -->
<template>
  <div id="liveCategoryList">
    <div class="border_bottom">
      <span class="title_span">基础管理 / 分类管理</span>
    </div>
    <div >
      <el-form :inline="true" label-position="left" label-width="100px">
        <div class="mT10 text-align-right">
          <el-row>
            <el-form-item label="分类名称">
              <el-input v-model="form.categoryName" clearable placeholder="请输入分类名称" style="width:230px"></el-input>
            </el-form-item>
            <div style="float:right">
              <el-button type="primary" @click="btnPageList(true)" icon="my-search" class="mL57">查询</el-button>
              <el-button type="primary" @click="btnReset" icon="my-spinner11">重置</el-button>
              <el-button @click="createCategory">创建分类</el-button>
            </div>
          </el-row>
        </div>
      </el-form>

      <!-- 列表 -->
      <el-row>
        <el-table v-loading="loadingTableData" :data="tableData" row-key="id" :stripe="false" style="width: 100%">
          <el-table-column label="序号" type="index" show-overflow-tooltip width="50">
          </el-table-column>
          <el-table-column prop="categoryName" label="分类名称"></el-table-column>
          <el-table-column prop="createUserName" label="创建人"></el-table-column>
          <el-table-column prop="updateUserName" label="修改人"></el-table-column>
          <el-table-column prop="createTime" label="创建时间" :formatter="$$$dateFormat"></el-table-column>
          <el-table-column prop="updateTime" label="修改时间" :formatter="$$$dateFormat"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="updateCategory(scope.row)">修改</el-button>
              <el-button type="text" @click="deleteCategory(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <!-- 分页 -->
      <div class="mT20 mB20 float-right" style="width:100%;text-align:right;">
        <div style="float:right">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="form.pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="form.pageSize"
                        layout="total, sizes, prev, pager, next, jumper" :total="form.total">
          </el-pagination>
        </div>
      </div>

      <!--新增/修改分类dialog-->
      <el-dialog :title="operateType == 0 ? '创建分类' : '修改分类'" :visible.sync="operateDialog" width="30%">
        <el-form ref="form" :model="categoryForm" label-width="80px">
          <el-form-item label="分类名称">
            <el-input v-model="categoryForm.categoryName"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="btnCancel('categoryForm')">取 消</el-button>
          <el-button type="primary" @click="operateCategory">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import {liveBasicAPI} from "@/api/index";
  export default {
    components: {
    },
    data() {
      return {
        loginUser: {
          uid: this.$root.uid,
          username: this.$root.username,
          email: this.$root.email
        },
        loadingTableData: false,
        form: {
          categoryName: "",
          pageIndex: 1,
          pageSize: 10,
          total: 0
        },

        tableData: [], //列表
        purchaseModeEnum: [
          {
            value: 0,
            label: "统配采购"
          },
          {
            value: 1,
            label: "集中采购"
          },
          {
            value: 2,
            label: "自行采购"
          }
        ],
        loading: false,
        loginRoleUser: {
          purchaseAdminRole: this.$root.purchaseAdminRole,
          developRole: this.$root.developRole,
          purchaseWorkRole: this.$root.purchaseWorkRole,
        },
        operateType: 0, //0: 创建, 1: 修改
        categoryForm: {},
        operateDialog: false
      };
    },
    created: function () {
      //获取采购申请单列表
      this.btnPageList();
    },
    methods: {
      //每页显示条数更改
      handleSizeChange(pageSize) {
        this.form.pageSize = pageSize;
        this.btnPageList();
      },
      //跳转、下一页等
      handleCurrentChange(pageIndex) {
        this.form.pageIndex = pageIndex;
        this.btnPageList();
      },
      //重置
      btnReset() {
        this.form.pageIndex = 1;
        this.form.categoryName = ''
        this.btnPageList();
      },
      //查询
      btnPageList(isClickFlag) {
        this.loadingTableData = true;
        //判断是否点击查询按钮
        if (isClickFlag) {
          this.form.pageIndex = 1;
        } else {
        }
        //请求后台
        liveBasicAPI.getCategoryPage(
          this.form,
          res => {
            if (res) {
              this.loadingTableData = false;
              //赋值
              this.tableData = res.records
              this.form.total = res.total;
              this.form.pageIndex = res.page.pageIndex;
              this.form.pageSize = res.page.pageSize;
            }
          },
        );
      },
       btnCancel(form) {
        this.operateDialog = false;
        this.btnPageList();
        this.resetForm(form);
      },
      createCategory() {
        this.operateType = 0;
        this.operateDialog = true;
        this.categoryForm = {}
      },
      updateCategory(row) {
        this.categoryForm = row
        this.operateType = 1;
        this.operateDialog = true;
      },
      operateCategory() {
        //this.loadingTableData = true;
        if (this.operateType === 0) {
          liveBasicAPI.createCategory(this.categoryForm, res => {
            if (res) {
              this.operateDialog = false;
              this.btnPageList();
              this.messageSuccess("添加成功！");
            } else {
              this.messageError("添加失败");
            }
          });

        } else {
          liveBasicAPI.updateCategory(this.categoryForm, res => {
            if (res) {
              this.operateDialog = false;
              this.btnPageList();
              this.messageSuccess("修改成功");
            } else {
              this.messageError("修改失败");
            }
          });
        }
      },
      deleteCategory(row){
        this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if (!row.id) {
            this.messageError("参数错误,Id不能为空");
          }
          let param = {
            id: row.id,
            isDeleted: 1
          };
          liveBasicAPI.updateCategory(param, res =>{
            this.btnPageList();
            this.messageSuccess("删除成功");
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      resetForm(formName) {
        this.$nextTick(() => {
          this.$refs[formName].resetFields();
        });
      },
      dateFormat: function(row, column) {
        let date = row[column.property];
        if (date == undefined) {
          return "";
        }
        return formatDate(date);
      },
      messageWarn(message) {
        this.$message({ showClose: true, type: "warning", message: message });
      },
      messageSuccess(message) {
        this.$message({ showClose: true, type: "success", message: message });
      },
      messageError(message) {
        this.$message({ showClose: true, type: "error", message: message });
      },
      messageInfo(message) {
        this.$message({ showClose: true, type: "info", message: message });
      },
    },
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .mL57 {
    margin-left: 57px !important;
  }

  .el-tag {
    background-color: rgba(255, 255, 255, 0.2);
    border: 0px;
  }

  .div_total {
    line-height: 32px;
    display: inline;
    font-size: 16px;
    color: #606266;
    margin: 5px 100px 0px 0px;
  }
  .top {
  margin-top:20px;
  /* margin-left:20px; */
  padding:20px;
  border: none;
  border-radius: 0px;
  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.349019607843137);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.349019607843137);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.349019607843137);
}
.border_bottom {
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid rgb(231, 228, 235);
}
.title_span{
  font-size:14px;
  color:#666
}
</style>
